<template>
  <view class="shop-item">
    <view class="image">
      <image :src="thumb"></image>
      <view class="cashPrice" v-if="cashPrice && cashPrice!=oriScorePrice" v-text="cashPrice"></view>
      <view class="tag hot" v-if="type === 1">热卖</view>
      <view class="tag discount" v-if="type === 2 || type === 3">
        <view class="number">{{ (scorePrice * 10 / oriScorePrice).toFixed(1) }}</view>
        <view class="util">折</view>
      </view>
      <view class="title" v-text="title"></view>
    </view>
    <view class="content">
      <view class="price-box">
        <view class="scorePrice">
          <view class="number" v-text="scorePrice"></view>
          <view class="util">积分</view>
        </view>
        <view class="oriScorePrice" v-if="oriScorePrice">
          <view class="number" v-text="oriScorePrice"></view>
          <view class="util">积分</view>
        </view>
      </view>
      <view class="btn" @tap="$emit('event-click', $event)">兑换</view>
    </view>
  </view>
</template>

<script>
import { isColor } from "@/utils";
export default {
  name: "shopItem",
  props: {
    title: String,
    thumb: String,
    // 市场人民币价格
    cashPrice: {
      type: Number,
      default: 0
    },
    // 原价积分
    oriScorePrice: Number,
    // 售价积分
    scorePrice: Number,
    type: Number
  }
};
</script>

<style lang="scss" scoped>
.shop-item {
  // background-color: #FFFFFF;
  .image {
    overflow: hidden;
    border-radius: 12upx;
    width: 100%;
    height: 320upx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }
    .cashPrice {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba($color: #000000, $alpha: 0.75);
      color: #ffffff;
      padding: 0 10upx;
      font-size: 24upx;
      border-radius: 4upx;
      &:before {
        content: "市场价:¥";
      }
    }
    .title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      background-color: rgba($color: #000000, $alpha: 0.75);
      color: #ffffff;
      font-size: 24upx;
      padding: 5upx 10upx;
    }
    .tag {
      position: absolute;
      top: 0;
      right: 0;
      padding: 2upx 15upx;
      color: #FFFFFF;
      font-style: italic;
      border-radius: 4upx;
      &.hot{
        background-color: red;
      }
      &.discount{
        background-color: #fec108;
        color: #000000;
        display: flex;
        align-items: flex-start;
        .number{
          font-size: 32upx;
        }
        .util{
          margin-left: 5upx;
          font-size: 22upx;
        }
      }
    }
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10upx 5upx;
    .price-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;

      .scorePrice {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #ff9c1e;
        .number {
          font-size: 32upx;
        }
        .util {
          font-size: 26upx;
        }
      }
    }
    .oriScorePrice {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #9aa2af;
      text-decoration: line-through;
      .number {
        font-size: 32upx;
      }
      .util {
        font-size: 26upx;
      }
    }

    .btn {
      height: 60upx;
      line-height: 60upx;
      border-radius: 80upx;
      padding: 0 40upx;
      background-color: #ff9c1e;
      color: #ffffff;
      font-size: 26upx;
      box-shadow: 2px 5upx 5upx 0 #cccccc;
      &:active {
        transform: scale(1.1);
      }
    }
  }
}
</style>
